跳到主要内容

理解css 1234值表示法

css 属性的四个值的属性从左上角开始,顺时针设置:

  • 如果设置三个值,则第二个值为对称值,即省略的第四个值与第二个值一致。
# 上右下左
padding: 10px;

# 上下、左右
padding: 10px 20px;

# 上、左右、下
padding: 10px 20px 15px;

# 上、右、下、左
padding: 10px 10px 20px 15px;


# 全部
border-radius: 50%

# 左上角&右下角、右上角&左下角
border-radius: 50% 10%

# 左上角、右上角&左下角、右下角
border-radius: 25% 50% 40%

# 左上角、右上角、右下角、左下角
border-radius: 10% 30% 50% 70%;

# 左上角、右上角、右下角、左下角的上下值
border-radius: 4px 3px 6px / 2px 4px;
/* 等价于: */
/* border-top-left-radius: horizontal vertical */
/* horizontal:表示椭圆的水平半长轴在被用作边框的半径 */
/* vertical: 表示椭圆的垂直半长轴在被用作边框的半径 */
/* 两个值可以设置左上角的圆角(圆弧)效果 */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;